<route lang="json5" type="home">
// @formatter:off
{
  layout: 'theme', // 使用主题
  style: {
    navigationBarTitleText: 'UNI_FTEAM',
    // navigationStyle: 'default', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
import { useUserStore } from '@/store'

import { blue, red } from '@ant-design/colors'

const { t, setLocale } = useI18n()
const store = useUserStore()
const { theme, themeVars, setTheme } = useTheme()
const { userInfo } = storeToRefs(store)
const statusBarHeight = ref(20)
const barHeight = ref(38)

/* 切换主题色 */
const changeTheme = (bgColor?: string, fontColor?: string) => {
  themeVars.value = {
    colorTheme: bgColor ?? 'transparent',
    darkColor3: (fontColor ?? theme.value === 'dark') ? (fontColor ?? '#f5f5f5') : '#272a2f',
  }
}
watch(() => theme.value, (val) => {
  changeTheme()
})

/* 宫格列表 */
const gridList = ref([
  {
    iconName: 'layers',
    title: t('layersTitle', 'text'),
    text: 'SFC',
    color: '#0163ff',
    url: '/pages/layout-demo/layout-demo',
  },
  {
    iconName: 'attach',
    title: t('attachTitle', 'text'),
    text: t('attachText', 'text'),
    color: '#ffc400',
    url: '/pages/pinia-demo/pinia-demo',
  },
  {
    iconName: 'link-unlink',
    title: t('linkUnlinkTitle', 'text'),
    text: t('linkUnlinkText', 'text'),
    color: '#ca145d',
    url: '/pages/request-demo/query-test-demo',
  },
  {
    iconName: 'link',
    title: t('linkTitle', 'text'),
    text: t('linkText', 'text'),
    color: '#11cde8',
    url: '/pages/request-demo/use-request-demo',
  },
  {
    iconName: 'user',
    title: t('userTitle', 'text'),
    text: t('userText', 'text'),
    color: '#fe1c00',
    url: '/pages/request-demo/login-demo',
  },
  {
    iconName: 'lock-off',
    title: t('lockOffTitle', 'text'),
    text: t('lockOffText', 'text'),
    color: '#607d8b',
    url: '/pages/router-demo/index',
  },
  {
    iconName: 'chart',
    title: t('chartTitle', 'text'),
    text: 'Echarts 5.14',
    color: '#795548',
    url: '/pages/echarts-demo/index',
  },
  {
    iconName: 'transfer',
    title: t('transferTitle', 'text'),
    text: t('transferText', 'text'),
    color: '#a61bc3',
    url: '/pages/wot-ui-demo/index',
  },
  {
    iconName: 'view-module',
    title: t('viewModuleTitle', 'text'),
    text: 'z-padding',
    color: '#d4ed00',
    url: '/pages/paging-demo/index',
  },
  {
    iconName: 'bianjiliebiao',
    title: t('viewListTitle', 'text'),
    text: 'i18n',
    color: '#fea600',
    url: '/pages/i18n-demo/index',
  },
  {
    iconName: 'menu-fold',
    title: t('menuFoldTitle', 'text'),
    text: t('menuFoldText', 'text'),
    color: '#652df4',
    url: '/pages/custom-nav-demo/index',
  },
  {
    iconName: 'chart-bubble',
    title: 'Unocss',
    text: t('chartBubbleTitle', 'text'),
    color: '#ca145d',
    url: '/pages/unocss-demo/index',
  },
])

onLoad(() => {
  // 状态栏高度
  statusBarHeight.value = (uni.getSystemInfoSync().statusBarHeight as number) || 20
  // #ifdef MP-WEIXIN
  // 胶囊数据
  const { top, height } = uni.getMenuButtonBoundingClientRect()
  // 自定义导航栏高度 = 胶囊高度 + 胶囊的 padding * 2, 如果获取不到设置为 38
  barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38
  // #endif
})
</script>

<template>
  <view class="min-h-100vh">
    <!-- 顶部自定义的主题Banner -->
    <view class="w-[calc(100vw-64rpx)] bg-[var(--wot-color-theme)] p-x-32rpx">
      <!-- <view :style="{ height: `${statusBarHeight}px` }" /> -->
      <view class="flex flex-col items-center gap-2 pb-6 pt-32rpx">
        <view class="flex items-center overflow-hidden rounded-lg">
          <img class="h160rpx w160rpx" :src="$assets('@/static/logo.png')">
        </view>
        <view class="mt16px flex flex-1 flex-col items-center">
          <text class="text-24px color-[var(--wot-dark-color3)]">UNI FTEAM</text>
          <text class="">{{ t('about') }}</text>
        </view>
      </view>
    </view>
    <view class="mt-30rpx flex flex-col items-center px-30rpx">
      <!-- 切换主题 -->
      <view
        class="h-120rpx w-100% flex items-center justify-evenly overflow-hidden rounded-20rpx bg-[var(--theme-bg-color)] font-size-20rpx line-height-28rpx shadow-sm"
      >
        <view
          class="h-50rpx w-94rpx flex items-center justify-center rounded-25rpx bg-blue-600 text-white"
          @click="changeTheme(blue[0], blue[5])"
        >
          {{ t('bgColor1') }}
        </view>
        <view
          class="h-50rpx w-94rpx flex items-center justify-center rounded-25rpx bg-red-500 text-white"
          @click="changeTheme(red[0], red[5])"
        >
          {{ t('bgColor2') }}
        </view>
        <view
          class="h-50rpx w-94rpx flex items-center justify-center rounded-25rpx bg-magenta-600 text-white"
          @click="changeTheme()"
        >
          {{ t('bgColor3') }}
        </view>

        <view class="w-260rpx flex items-center justify-center">
          <view class="mr-10rpx flex-1 text-right font-size-28rpx color-#9e9e9e">{{ t('darkMode') }}</view>
          <wd-switch
            v-model="theme"
            size="23px"
            active-value="dark"
            inactive-value="light"
            active-color="#272a2f"
            :disabled="userInfo.followSystem"
          />
        </view>
      </view>
      <!-- 功能区 -->
      <view class="mt-40rpx w-100% overflow-hidden rounded-20rpx bg-[var(--theme-bg-color)] shadow-md">
        <wd-grid :column="3" clickable border>
          <wd-grid-item v-for="item in gridList" :key="item.iconName" use-slot link-type="navigateTo" :url="item.url">
            <wd-icon :name="item.iconName" size="36px" :color="item.color" />
            <view class="font-size-28rpx font-bold">{{ item.title }}</view>
            <view class="font-size-22rpx color-#9e9e9e">{{ item.text }}</view>
          </wd-grid-item>
        </wd-grid>
      </view>

      <!-- 多语言 -->
      <view
        class="mt-40rpx h-120rpx w-[calc(100%-60rpx)] flex items-center justify-between overflow-hidden rounded-20rpx bg-[var(--theme-bg-color)] p-x-30rpx shadow-sm"
        @click="setLocale"
      >
        <view class="flex items-center">
          <wd-icon name="setting" size="22px" color="#0163ff" />
          <view class="ml-30rpx font-size-30rpx">{{ t('nowLocaleText') }}</view>
        </view>
        <view class="flex items-center">
          <view class="mr-5rpx h-22px font-size-28rpx color-#9e9e9e line-height-22px">{{ t('nowLocale') }}</view>
          <wd-icon name="chevron-right" size="22px" color="#9e9e9e" />
        </view>
      </view>

      <!-- 暗黑模式 -->
      <view
        class="mt-40rpx h-120rpx w-[calc(100%-60rpx)] flex items-center justify-between overflow-hidden rounded-20rpx bg-[var(--theme-bg-color)] p-x-30rpx shadow-sm"
      >
        <view class="flex items-center">
          <wd-icon name="windows-filled" size="26px" color="#cf3d35" />
          <view class="ml-30rpx font-size-30rpx">{{ t('darkModeFollowText') }}</view>
        </view>
        <wd-checkbox
          v-model="userInfo.followSystem"
          custom-shape-class="w-[var(--wot-checkbox-size,22px)!important] h-[var(--wot-checkbox-size,22px)!important]"
          checked-color="#cf3d35"
          custom-style="margin:0"
          @change="setTheme"
        />
      </view>

      <!-- 底部作者信息 -->
      <view class="mt-10rpx w-60% opacity-60">
        <wd-divider>{{ t('authorText') }}</wd-divider>
      </view>
    </view>
  </view>
</template>

<style>
/* 暗黑模式 start */
.wot-theme-dark {
  color: #f5f5f5;
  background: black;
  --theme-bg-color: #1b1b1b;
}
</style>
